<template>
  <div id="myStrategyMore">
    <mt-header fixed title="我的策略" v-if="isHeader">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
    </mt-header>
    <div class="strategy-cont" :class="isHeader?'isHeader':''">
      <div class="pick-box">
        <div class="header-title">
          <span class="fl vertical-line"></span>
          <h2 class="fl top-title">自定义策略</h2>
          <!--<span class="icon-del" @click="">-->
          <!--<i class="fa fa-trash-o go-btn" aria-hidden="true"></i>-->
          <!--</span>-->
          <span class="icon-del" @click="goToEdit">
          <i class="fa fa-pencil go-btn" aria-hidden="true"></i>
        </span>
        </div>
        <div class="devide-line"></div>
        <div class="super-wave factor_news">
          <div class="strategy-item" v-for="(s, index) in strategys" :key="index" @click="goToSortsFactors(s)">
            <div class="strategy-name">{{s.strategy_name}}</div>
            <div class="strategy-id">{{s.factor_names}}</div>
            <div class="strategy-time"><i class="fa fa-history btn-icon-time" aria-hidden="true"></i>创建
              {{s.create_time}}
            </div>
            <span class="btn-arrow-right">
              <i class="el-icon-arrow-right"></i>
            </span>
          </div>
        </div>
        <div class="add-strategy" @click="addStrategy">
          <div class="add-btn" v-if="strategys.length<5">+添加策略</div>
          <div class="add-tip">提示：最多只能建立5个策略哦~</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import REQUEST from './../services/test'

  export default {
    name: 'myStrategyMore',
    data () {
      return {
        isHeader: false,
        value: '',
        show: true,
        strategys: []
      }
    },
    created () {
      this.$store.commit('getUrlParams')
      this.isHeader = this.$store.state.isHeader
      this.$store.dispatch('isAllFactors')
      this.getMyStrategys()
    },
    watch: {},
    methods: {
      goBack: function () {
        // history.back()
        this.$router.go(-1)
      },
      goToEdit () {
        this.$router.push({name: 'strategyEdit'})
      },
      addStrategy (s) {
        this.$router.push({name: 'factorSortsMore'})
      },
      goToSortsFactors (s) {
        this.$store.commit('clearSelectFactor')
        let allFactor = this.$store.state.allFactors
        if (allFactor.length > 0) {
          let b = allFactor.filter(v => {
            return s.factor_ids.indexOf(v.factor_id) > -1
          })
          b.forEach(v => {
            v.isSelect = true
            this.$store.commit('pushSelectFactor', v)
          })
        }
        s.from = 'myStrategyMore'
        this.$router.push({path: '/factorSortsMore', query: s})
      },
      getMyStrategys () {
        let userInfo = this.$store.state.userInfo
        let _self = this
        REQUEST.allMyStrategys(userInfo).then(res => {
          _self.strategys = res
        }).catch(err => {
          console.info(err)
        })
      }
    },
    mounted () {
    },
    computed: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #myStrategyMore {
    background: #f8f8f8;
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .strategy-cont.isHeader {
      margin-top: 1.25rem !important;
    }
    .strategy-cont {
      /*margin-top: 1.25rem;*/
      .btn-icon-time {
        color: #1296db;
        padding: 0.1066667rem 0.1066667rem 0.1066667rem 0;
      }
      .pick-box {
        margin-top: 0.2666667rem;
        .header-title {
          height: 1.0666667rem;
          line-height: 1.0666667rem;
          background: #ffffff;
          overflow: hidden;
          .vertical-line {
            display: inline-block;
            width: 0.08rem;
            height: 0.5333333rem;
            /*line-height: 1.0666667rem;*/
            position: relative;
            top: 50%;
            margin-top: -0.2666667rem;
            background-color: #3796e3;
          }
          .top-title {
            position: relative;
            left: 0.4rem;;
            top: 50%;
            margin-top: -0.5333333rem;
            font-weight: 600;
            font-size: 0.4rem;
            height: 1.0666667rem;
            overflow: hidden;
            /*line-height: 1.25rem;*/
            color: #000000;
          }
          .go-btn {
            float: right;
            height: 1.0666667rem;
            line-height: 1.0666667rem;
            font-size: 0.4266667rem;
            color: #1296db;
            padding-right: 0.5333333rem;
          }
        }
        .super-wave {
          height: 2.1333333rem;
          background: #ffffff;
          color: #000000;
          font-size: 0.3466667rem;
          position: relative;
        }
        .super-wave.factor_news {
          height: auto;
          overflow: hidden;
          background: #ffffff;
          .strategy-item {
            min-height: 2.4rem;
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: left;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -ms-flex-direction: column;
            -o-flex-direction: column;
            flex-direction: column;
            border-bottom: 1px solid #e5e5e5;
            position: relative;
            div {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              /*width: 20%;*/
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
            }
            .btn-arrow-right {
              position: absolute;
              right: 0.5333333rem;
              top: 50%;
              margin-top: -0.5333333rem;
              height: 1.0666667rem;
              color: #e5e5e5;
              i {
                text-align: center;
                font-size: 0.4533333rem;
                height: 1.0666667rem;
                line-height: 1.0666667rem;
              }
            }
            .strategy-name {
              font-size: 0.4rem;
              margin: 0.4rem 0 0 0.4rem;
              font-weight: bolder;
            }
            .strategy-id {
              font-size: 0.32rem;
              color: #a0a0a0;
              margin: 0.48rem 0 0 0.4rem;
            }
            .strategy-time {
              font-size: 0.3466667rem;
              color: #666666;
              margin: 0.2666667rem 0 0.2rem 0.4rem;
            }
          }
        }
        .add-strategy {
          min-height: 2.2133333rem;
          background: #ffffff;
          .add-btn {
            padding-top: 0.6666667rem;
            color: #1296db;
            font-size: 0.5066667rem;
          }
          .add-tip {
            margin-top: 0.2666667rem;
            font-size: 0.3466667rem;
            color: #a0a0a0;
          }
        }
      }
      .pick-dec {
        padding: 0.265625rem 0.40625rem;
        background-color: #f7f7f7;
        color: #999999;
        text-align: left;
      }
      .devide-line {
        width: 100%;
        height: 0.0266667rem;
        background-color: #dddddd;
        border-bottom: 1px solid #f7f7f7;
      }
    }
  }
</style>
